<template>
  <div class="user-profile">
    <!-- 顶部标题栏 -->
    <myNav :showArrow="true">
      <template #title>
        <div>
          个人信息
        </div>
      </template>
    </myNav>
    <!-- 主体内容 -->
    <!-- h5新增表单项，用于选择图片 -->
    <input type="file" hidden ref="file" accept="image/*" @change="onChangeFile" />
    <van-cell center is-link class="photo-cell" title="头像" @click="$refs.file.click()">
      <van-image class="avatar" fit="cover" round :src="user?.photo" />
    </van-cell>
    <van-cell is-link :value="user?.name" title="昵称" @click="isUpdateNameShow = true" />
    <van-cell is-link :value="user?.gender === 0 ? '男' : '女'" title="性别" @click="isUpdateGenderShow = true" />
    <van-cell is-link :value="user?.birthday" title="生日" @click="isUpdateBirthdayShow = true" />
    <!-- 修改昵称弹出层 -->
    <van-popup v-model="isUpdateNameShow" position="bottom" custom-style="height: 100%;">
      <!-- <updateName :value="user.name" @close="isUpdatePhotoShow=false" v-if="isUpdatePhotoShow" @updateName="user.name=$event" /> -->
      <updateName v-if="isUpdateNameShow" v-model="user.name" @close="isUpdateNameShow = false" />
    </van-popup>
    <!-- 修改性别弹出层 -->
    <van-popup v-model="isUpdateGenderShow" position="bottom" custom-style="height: 100%;">
      <updateGender v-if="isUpdateGenderShow" v-model="user.gender" @close="isUpdateGenderShow = false" />
    </van-popup>
    <!-- 修改生日弹出层 -->
    <van-popup v-model="isUpdateBirthdayShow" position="bottom" custom-style="height: 100%;">
      <updateBirthday v-if="isUpdateBirthdayShow" v-model="user.birthday" @close="isUpdateBirthdayShow = false" />
    </van-popup>
    <!-- 修改头像弹出层 -->
    <van-popup v-model="isUpdatePhotoShow" position="bottom" custom-style="height: 100%;">
      <updateProfile v-if="isUpdatePhotoShow" :file="file" v-model="user.photo" type="text"
        @close="isUpdatePhotoShow = false" />
    </van-popup>
  </div>
</template>

<script>
import myNav from '@/components/myNav/index.vue'
import updateName from './components/update-name'
import updateGender from './components/update-gender'
import updateBirthday from './components/update-birthday'
import updateProfile from './components/update-profile'
import { getUserProfile } from '@/api/user'
export default {
  name: 'userProfile',

  components: {
    myNav,
    updateName,
    updateGender,
    updateBirthday,
    updateProfile
  },

  data() {
    return {
      // 用户信息
      user: {},
      // 控制修改昵称弹出层显示状态
      isUpdateNameShow: false,
      // 控制修改性别弹出层显示状态
      isUpdateGenderShow: false,
      // 控制修改生日弹出层显示状态
      isUpdateBirthdayShow: false,
      // 控制修改头像弹出层显示状态
      isUpdatePhotoShow: false,
      // 选择后的图片对象
      file: null
    }
  },

  created() {
    this.loadUserProfile()
  },

  methods: {
    // 请求用户信息
    async loadUserProfile() {
      const res = await getUserProfile()
      this.user = res
    },
    // 选择头像图片
    onChangeFile() {
      // 获取文件对象
      this.file = this.$refs.file.files[0]
      // 基于文章对象获取blob数据
      // this.img = window.URL.createObjectURL(file)
      this.isUpdatePhotoShow = true
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.$refs.file.value = ''
    }
  }
}
</script>

<style lang="less" scope>
.user-profile {
  background-color: #000;

  .photo-cell {
    .van-cell__value {
      height: 30px;
    }
  }

  .avatar {
    width: 30px;
    height: 30px;
  }

  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
